<template>
    <div class="content">
        <div class="register">
            <div><label for="">用户名：</label><input id="user" @blur="ipt_change($event)" v-model="user.user" type="text"><span class="err_msg">{{ err_msg.user }}</span></div>
            <div><label for="">密码：</label><input id="password" @blur="ipt_change($event),ipt_change2($event)" v-model="user.password" type="password"> <span class="err_msg">{{ err_msg.password }}</span></div>
            <div title="两次密码要一致"><label for="">确认密码：</label><input id="password2" @blur="ipt_change2($event)" v-model="user.password2" type="password"> <span class="err_msg">{{ err_msg.password2 }}</span></div>
            <div><label for="">姓名：</label><input id="name" @blur="ipt_change($event)" v-model="user.name" type="text"> <span class="err_msg">{{ err_msg.name }}</span></div>
            <div><label for="">出生年日：</label><input id="birthday" @blur="ipt_change($event)" v-model="user.birthday" type="date"> <span class="err_msg">{{ err_msg.birthday }}</span></div>
            <div >
                <label for="">性别：</label>
                <div class="gender_div">
                <input id="gender" @blur="ipt_change($event)" v-model="user.gender" type="radio" name="gender" value="男">男
                <input id="gender" @blur="ipt_change($event)" v-model="user.gender" type="radio" name="gender" value="女">女
                </div>
                <span class="err_msg">{{ err_msg.gender }}</span>
            </div>
            <!-- <div>
                <label for="">性别：</label>
                <input id="gender" @blur="ipt_change($event)" v-model="user.gender" list="gender_list">
                <datalist id="gender_list">
                    <option value="男"></option>
                    <option value="女"></option>
                </datalist>
                <span class="err_msg">{{ err_msg.gender }}</span>
            </div> -->
            <div><label for="">身份证号码：</label><input id="card_id" @blur="ipt_change($event)" v-model="user.card_id" type="text"> <span class="err_msg">{{ err_msg.card_id }}</span></div>
            <div><label for="">手机号码：</label><input id="phone" @blur="ipt_change($event)" v-model="user.phone" type="text"> <span class="err_msg">{{ err_msg.phone }}</span></div>
            <div><label for="">注册授权码：</label><input id="invite_code" @blur="ipt_change2($event)" v-model="user.invite_code" type="text"> <span class="err_msg">{{ err_msg.invite_code }}</span></div>
            <div class="invite_code_div"><span class="invite_code">{{invite_code}}</span><button @click="get_invite_code()">获取授权码</button> </div>
            <div class="button">
                <input @click="register" type="button" name="" id="" value="确定注册">
                <!-- <div>2</div>
                <div>3</div> -->
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'register',
    data(){
        return {
            user:{
                user:"",
                password:"",
                password2:"",
                name:"",
                birthday:"",
                gender:"",
                card_id:"",
                phone:"",
                invite_code:""
            },
            invite_code:"------",
            complete_invite_code:null,
            count:0,  // 记录申请授权码的次数，每次不能超过10次
            // data_right:false,  // 所有数据是否正确
            err_msg:{
                user:"*",
                password:"*",
                password2:"*",
                name:"",
                birthday:"",
                gender:"",
                card_id:"*",
                phone:"*",
                invite_code:"*"
            }
        }
    },
    methods:{
        register(){
            console.log("注册");
            console.log(this.user);
            // 检查用户输入的数据是否有误
            for(let item in this.err_msg){
                if(this.err_msg[item]){
                    this.$toast(this.err_msg[item])
                    return
                }
            }
            this.complete_invite_code[2]=this.user.invite_code.trim()
            this.$http({
                method:'post',
                url:'/ajax/api/register',
                data:{
                    new_user:this.user,
                    invite_code:this.complete_invite_code
                }
            }).then(data=>{
                if(data.data=="注册成功"){
                    this.$toast(data.data)
                    this.$router.push('/login')
                }else{
                    this.$toast(data.data)
                }
            })
        },
        get_invite_code(){
            this.count+=1
            this.$http({
                method:'post',
                url:'/ajax/api/get_invite_code',
                data:{
                    count:this.count
                }
            }).then(data=>{
                console.log(data);
                let arr = data.data.split(":")
                this.complete_invite_code = arr
                this.invite_code = arr[2]
            })
        },
        ipt_change(el){  // 输入框失去焦点时判断用户的输入
            let id = el.currentTarget.id
            let value = el.currentTarget.value.trim()
            let msg = this.$my_tools.check_data[id](value)
            if(msg){
                if(value =="" && (id == "name" || id == "birthday" || id == "gender")){
                    this.err_msg[id]=""
                }else{
                    this.err_msg[id]=msg
                }
                // this.$toast(this.err_msg)
            }else{
                this.err_msg[id]=""
            }
        },
        ipt_change2(el){  // 特殊的输入框失去焦点时判断用户的输入
            let id = el.currentTarget.id
            let value = el.currentTarget.value.trim()
            if(id=="password2" || id=="password"){
                if(this.user.password != this.user.password2){
                    this.err_msg["password2"]="两次输入的密码必须一致"
                }else{
                    this.err_msg["password2"]=""
                }
            }else if(id=="invite_code"){
                if(this.complete_invite_code){
                    if(value != this.complete_invite_code[2]){
                        this.err_msg["invite_code"]="授权码与申请的授权码不一致"
                    }else{
                        this.err_msg["invite_code"]=""
                    }
                }else{
                    this.err_msg["invite_code"]="请先获取授权码"
                }
            }
        },
        check_data(){  // 检查输入的信息是否正确

        },
    }
}
</script>

<style lang='scss' scoped>
    .register{
        margin: 10px 50px;
        display: grid;
        // grid-column-gap: 10px;
        // flex: 1;
        // background-color: pink;
        // flex-direction: column;
        // justify-content: center;
        // align-items: center;
        width: 500px;
        div{
            margin: 10px;
            display: grid;
            grid-template-columns: 20% 50% 30%;
            // justify-content: center;
            align-items: center;
            label{
                font-weight: bolder;
            }
            .gender_div{
                display: grid;
                grid-template-columns: 10% 20% 10% 20%;
            }
            .err_msg{
                margin-left:5px ;
                color: red;
                font-size: 12px;
                white-space: nowrap;
                // grid-column-start: 1;
                // grid-column-start: span 2;
                // grid-row-start: 11;
                // grid-row-end: span 5;
            }
        }
        
        .invite_code_div{
            display: grid;
            grid-template-columns: 40% 30% 30%;
            .invite_code{
                // flex: 1;
                margin-right:10px;
                width: 80%;
                height: 30px;
                line-height: 30px;
                font-size: 28px;
                text-align: center;
                font-weight: bolder;
                letter-spacing: 5px;  // 字符间距
                background-color: rgba(192, 192, 192, 0.801);
            }
        }
        
        .button{
            margin:10px 10px;
            display: grid;
            grid-template-columns:40% 30% 30%;
            justify-content:center;
            input{
                margin: 0 20px;
                height: 30px;
                letter-spacing: 5px;
                // width: 150px;
                grid-column-start:1;
                grid-column-end:span 2;
            }
        }
    }
</style>